<template>
	<view class="mysearch_box">
		<div class="masking_out">
			
		</div>
		<div class="out_box">
			<div class="tab_box">
				<div name="introduction_box" class="title_box title_box_choosed" onclick="changeConent('introduction_box')">
					<img src="../assets/images/攻略-2.png" class='icon'>
					<p class="title_val">看攻略</p>
				</div>
				<div name="trip_box" class="title_box" onclick="changeConent('trip_box')">
					<img src="../assets/images/行程描述.png" class='icon'>
					<p class="title_val">做行程</p>
				</div>
				<div name="hotel_box" class="title_box" onclick="changeConent('hotel_box')">
					<img src="../assets/images/24gf-hotel.png" class='icon'>
					<p class="title_val">特价酒店</p>
				</div>
			</div>
			<div class="content_box">
				<div class="introduction_box">
					<input class="search_box bourm" type="text" placeholder="搜目的地/主题攻略/问题" onfocus="getSearchFocus()">
					<button class="but button_but" style="background: url(images/搜索.png) no-repeat;background-size: 35px 35px;
				background-position: 10px;">
						搜索旅行攻略
					</button>
				</div>
				<div class="trip_box">
					<div class="label_val">
						穷游行程助手，一分钟搞定你的攻略
					</div>
					<a class="personal" href="">
						免费私人定制
					</a>
					<div class="add">
						<span>+创建行程</span>
					</div>
				</div>
				<div class="hotel_box">
					<input class="search_box hotel" type="text" placeholder="搜城市/机场/地标/酒店" onfocus="getSearchFocus()">
					<input class="search_date_box" type="text" placeholder="入住日期&nbsp;&nbsp;--&nbsp;&nbsp;退房日期">
					<button class="but search_but">
						<img src="../assets/images/搜索.png" class="search_but_img">
						搜索特价酒店
					</button>
				</div>
				
			</div>
			<div class="info_box">
				
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" >
	
	*{
		margin: 0px;
		padding: 0px;
	}
	.mysearch_box{
		position: relative;
	}
	.masking_out{
		width: 100%;
		position: absolute;
		display: none;
		background: hsla(0,0%,100%,.8);
	}
	.out_box{
		width: 792px;
		position: absolute;
		display: flex;
		flex-direction: column;
		.tab_box{
			width: 100%;
			height: 52px;
			display: flex;
			
			.title_box{
				height: 100%;
				width: 264px;
				display: flex;
				align-items: center;
				justify-content: center;
				float: left;
				cursor: pointer;
				background-color: rgba(0, 0, 0, .75);
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
				
				.icon{
					width: 24px;
					height: 24px;
					margin-right: 7px;
				}
				
				.title_val{
					font: 300 20px/52px PingFangSC-light;
					color: #fff;
				}
			}
			
			.title_val:hover{
				font-weight: bold;
			}
			.title_box_choosed {
				font-weight: bold;
				background-image:linear-gradient(90deg,rgba(40,213,164,.8),rgba(38,208,181,.8));
			}
		}
		
		
		
		.content_box>div{
			width: 100%;
			background-image:linear-gradient(90deg,rgba(21,219,145,.8),rgba(6,204,199,.8));
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.content_box{
			.introduction_box{
				.bourm{
					color: #323232;
					text-align: left;
					text-indent: 1em;
					outline: none;
					width: 582px;
					height: 54px;
					background: #fff;
					border-radius: 6px;
					font-size: 20px;
					border: none;
					margin-left: -2px;
				}
			}
			.but{
				width: 180px;
				height: 54px;
				border-radius: 6px;
				color: #fff;
				font-weight: 600;
				font-size: 18px;
				cursor: pointer;
				text-align: center;
				border: 2px solid #fff;
				line-height: 50px;
				text-indent: 2em;
			}
			.trip_box{
				.label_val{
					font-size: 15px;
					outline: none;
					float: left;
					height: 46px;
					line-height: 46px;
					color: #fff;
					font-size: 18px;
					text-align: center;
					width: 450px;
				}
				.personal{
					width: 146px;
					height: 46px;
					border: 2px solid #fff;
					border-radius: 6px;
					line-height: 46px;
					text-align: center;
					color: #fff;
					font-weight: 600;
					font-size: 18px;
					margin-left: 10px;
					text-decoration: none;
				}
				.add{
					font: 12px;
					text-decoration: none;
					box-sizing: border-box;
					display: inline-block;
					border: 0;
					border-radius: 6px;
					font-weight: 600;
					font-size: 18px;
					cursor: pointer;
					text-align: center;
					margin-left: 20px;
					width: 146px;
					height: 48px;
					line-height: 48px;
					background: #ffe300;
					color: #000;
				}
			}
		}
		.hotel_box{
			background: linear-gradient(90deg,rgba(83,144,250,.8),rgba(112,71,250,.8));
			.search_box,.search_date_box{
				font: 12px;
				box-sizing: border-box;
				border: 0;
				padding: 0 27px;
				height: 54px;
				font-size: 18px;
				color: #000;
				border-right: 1px solid rgba(0,0,0,.1);
				border-radius:6px;
				outline: none;
			}
			.search_box{
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				width: 260px;
			}
			.search_date_box{
				width: 322px;
				border-top-left-radius:0;
				border-bottom-left-radius:0;
				margin-left: -10px;
			}
			.search_but{
				background: linear-gradient(90deg,#ff168f,#ff5854);
				position: relative;
				border: none;
				.search_but_img{
					position: absolute;
					width: 35px; 
					height: 35px;
					margin-top: 5px;
					margin-left:-40px;
				}
			}
		}
		.info_box{
			width:582px;
			height:248px;
			background: hsla(0,0%,100%,.95);
			border-radius: 6px;
			margin-left: 7px;
			display: none;
		}
	}
	
</style>